<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>物料清单</title>
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips {
        text-align: center;
      }

      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
      }

      .mui-bar~.mui-pull-top-tips {
        top: 24px;
      }

      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }

      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }

      .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
      				-webkit-transition-duration: 400ms;
      				transition-duration: 400ms;*/
        margin: 0;
      }

      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }

      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }

      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }

      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }

      .mui-pull-top-canvas canvas {
        width: 40px;
      }

      /* .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
      } */

      /* .silder-wrap {
        height: 60px;
      }
      
      .mui-fullscreen .mui-segmented-control~.mui-slider-group {
        top: 60px;
      }
      
     .mui-segmented-control .mui-control-item {
        line-height: 60px;
      } */

      /* .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        color: #3188FE;
        position: relative;
      } */

      /* .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after {
        content: '';
        display: block;
        width: 24px;
        height: 3px;
        background: #3188FE;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      } */

      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding: 20px;
      }

      .mui-card-header {
        padding: 0 0 20px 0;
        position: relative;
        font-size: 16px;
      }

      .lists {
        padding: 20px 0 0px 30px;
      }

      .lists li {
        margin-bottom: 15px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .lists li .left_name {
        color: #9098AB;
        white-space: nowrap;
      }

      .lists li .right_name {
        color: #333333;
        float: right;
        text-align: right;
      }

      .right_name input,  .right_name select{
        width: 180px;
      }

      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188FE;
      }

      .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #3188FE;
      }

      .indexs {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #3188FE;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        margin-right: 5px;
      }

      .txt_l {
        position: absolute;
        z-index: 9;
        top: 40px
      }

      .tags {
        display: inline-block;
        width: 80px;
        height: 40px;
        background: url(../img/task/yinzhang_tinggongdaijiandian.png) no-repeat;
        background-size: 100%;
        vertical-align: middle;
      }

      .marks {
        display: inline-block;
        width: 70px;
        height: 26px;
        line-height: 26px;
        /* background-color: #10B7AF; */
        border-radius: 2px;
        color: #fff;
        text-align: center;
        transform: skewX(-15deg);
      }

      .m_r {
        padding-right: 25px;

      }

      .mui-navigate-right:after {
        right: 0 !important;
        top: 15px;
        color: #B4C0CF;
        font-size: 20px;
      }

      .sx_s {
        color: #fff;
      }

      .sx_s span {
        font-size: 17px;
      }

      .b_g {
        background-color: #10B7AF;
      }

      .b_g1 {
        background-color: #3188FE;
      }

      .b_g2 {
        background-color: #B4C0CF;
      }

      .screens {
        position: absolute;
        top: 44px;
        left: 0;
        width: 100%;
        min-height: 200px;
        background-color: #fff;
        z-index: 999;
      }

      .content_ul {
        padding: 30px;
        overflow: hidden;
      }

      .content_ul .rowli ul {
        padding: 0;
        margin: 0;
        list-style: none;
        border-bottom: solid 1px #DCDCDC;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
      }

      .rowli ul li {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #F5F6F7;
        border: solid 1px #C2CFDA;
        border-radius: 3px;
        color: #000;
        /* float: left; */
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        /* flex-grow: 1; */
      }

      .rowli ul li.ls {
        background-color: #3188FE;
        color: #fff;
      }

      .btnli {
        text-align: center;
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
      }

      .btnli .btns {
        background-color: #E7ECF1;
      }

      .btnli button {
        width: 45%;
      }

      .head_s {
        padding: 0 20px;
        border-bottom: solid 1px #DCDCDC !important;
        /* height: 20px; */
      }

      .muifooter {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 80px;
      }

      .fixed-btn {
        position: fixed;
        width: 100%;
        bottom: 0;
        z-index: 999;
      }
	  .tips-list {
	    margin-top: 30%;
	  }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">物料清单</h1>
        <!-- <a class="mui-icon mui-icon-right-nav mui-pull-right mui-icon mui-icon-gear sx_s" @click="getSearch"><span>筛选</span></a> -->
      </header>
      <div class="mui-content app-container">
        <div id="slider" class="">
          <div class="tab-content" id="tab-content">
            <div class="card_content">
			<!-- 弹窗-工器具  -->
			<div class="mui-backdrop" v-if="isShowTool">
				<div class="tips-list">
					<div class="mui-card card_content">
					<h4>工器具清单</h4>
					<div style="max-height: 300px; overflow-y: auto;">
					<table style="width:100%;" cellpadding="4" cellspacing="0" border="1" bordercolor="#CCCCCC">
					  <tbody>
						<tr>
						  <!-- <td>序号</td> -->
						  <td>编号</td>
						  <td>工器具名称</td>
						  <!-- <td>规格/型号</td> -->
						  <td>操作</td>
						</tr>
						<tr v-for="(item,index) in toolList" :key="index">
						  <!-- <td>{{index+1}}</td> -->
						  <td>{{item.id}}</td>
						  <td>{{item.name}}</td>
						  <!-- <td>{{item.materialSpec}}</td> -->
						  <td><button @click="addTool(item)" style="margin: 2px;">选择</button></td>
						</tr>
					  </tbody>
					</table>
					</div>
					<div style="margin-top: 20px; text-align: center;">
					  <button type="button" class="mui-btn" @tap="isShowTool = false">关闭</button>
					</div>
					</div>
				</div>
			</div>
				
             <div class="mui-card mui-table-view-cell" v-for="(item,index) in projectList" :key="index" v-cloak>

              <div class="mui-card-content mui-slider-handle" v-if="!item.isCustom">
                <div class="txt_l">
                  <span class="indexs">{{index+1}}</span>
                  <!-- <i class="tags"></i> -->
                </div>
                <ul class="mui-table-view lists">
                  <li class="lis">
                    <span class="left_name">物料号：</span>
                    <span class="right_name">{{item.materialArchivesId}}</span>
                  </li>
                  
                  <li class="lis">
                    <span class="left_name">物料描述：</span>
                    <span class="right_name">{{item.description}}</span>
                  </li>
                  <li class="lis">
                    <span class="left_name">使用数量：</span>
                    <span class="right_name">
                      <input type="number" v-model="item.quantity" value="" />
                       {{item.measdoc}} 
                    </span>
                  </li>
                </ul>
              </div>
              <div class="mui-card-content mui-slider-handle" v-else>
                <div class="txt_l">
                  <span class="indexs">{{index+1}}</span>
                </div>
                <ul class="mui-table-view lists">
                  <li class="lis">
                    <span class="left_name">物料类型：</span>
                    <span class="right_name">
                      <select name="" v-model="item.type" @change="selectType($event,index)">
                        <!--1耗材  2备品备件  3工器具-->
                        <option value="">请选择</option>
                        <option value="1">耗材</option>
                        <option value="2">备品备件</option>
                        <option value="3">工器具</option>
                       </select>
                    </span>
                  </li>
                  <li class="lis">
                    <span class="left_name">物料号：</span>
                    <span class="right_name">
                      <input type="text" v-model="item.materialArchivesId" value="" />
                    </span>
                  </li>
                  <li class="lis">
                    <span class="left_name">物料描述：</span>
                    <span class="right_name">
                      <input type="text" v-model="item.description" value="" />
                    </span>
                  </li>
                  <li class="lis">
                    <span class="left_name">使用数量：</span>
                    <span class="right_name">
                      <input type="number" v-model="item.quantity" value="" style="width: 100px;"/>
                       <select name="" v-model="item.measdoc" style="width: 80px;">
                       	<option value="">请选择</option>
                       	<option :value="item.value" v-for="item in unitArr">{{item.value}}</option>
                       </select>
                    </span>
                  </li>
                </ul>
              </div>
              <div class="mui-disabled" style="text-align: right;">
                  <a class="mui-btn mui-btn-red" @click="dels(index)">删除</a>
              </div>
            </div>
            </div>
            <div class="muifooter">
              <button type="button" @tap="toSelect" class="mui-btn mui-btn-primary mui-btn-outlined">从工单信息选择物料</button>
              <button type="button" @tap="addMaterial" class="mui-btn mui-btn-primary">添加物料</button>

            </div>
          </div>
          <!--</div>-->
        </div>
        <div class="fixed-btn">
          <button type="button" class="mui-btn mui-btn-primary" @tap="submits">提交</button>
        </div>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../js/sqlite.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init()
      var size = 15;
      var page = 1;
      var donePage = 1;
	  var taskId = 0;
      var ids = 3;
	  let lineType =null;
      var self = null;
      if (window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        self = plus.webview.currentWebview();
        console.log('parm',self)
		lineType = getSysInfo();
        // vm.form.projectTaskId = self.projectTaskId
        // vm.form.projectCategory = self.projectCategory
        ids = self.projectId
		taskId = self.taskId
        vm.projectList = self.materials ? self.materials : []
        console.log('hhhhaaaass', self)
        mui.baseApp.getDict(['valueUnit']).then(res => {
          console.log(res)
          vm.unitArr = res.valueUnit
        })
		
		vm.getDeviceList()
      }
      var vm = new Vue({
        el: '#container',
        data: {
		  isShowTool: false,
		  toolList: [],
          materialList: [],
          projectList: [],
          taskList: [],
          aList: [],
          yList: [],
          wList: [],
          unitArr: [],
		  toolIndex: '',
        },
        created: function() {
          // getProject(page)
          // getTaskList(donePage)
        },
        methods: {
			addTool(item){
				console.log(item,this.projectList)
				this.projectList[this.toolIndex].materialArchivesId = item.id
				this.projectList[this.toolIndex].description = item.name
				this.isShowTool = false
			},
			selectType(event,index){
				console.log(this.toolList.length,this.projectList[index].type)
				if(this.projectList[index].type == 3){
					if(this.toolList.length == 0){
						mui.toast('无工器具清单，请手动填写');
						return
					}
					this.toolIndex = index
					this.isShowTool = true
				}else{
					this.projectList[index].materialArchivesId = ''
					this.projectList[index].description = ''
					this.toolIndex = ''
					this.isShowTool = false
				}
			},
			getDeviceList() {
				// 缓存工器具清单
				let isOnlineTool = JSON.parse(localStorage.getItem(taskId))
				if(!lineType || isOnlineTool !== null){
					console.log('工器具清单', isOnlineTool)
					this.toolList = isOnlineTool
					return
				}
				
				plus.nativeUI.showWaiting('加载中')
				mui.baseApp.httpRequst("get", "/app/api/project/execution/detail/" + taskId, {}, (data)=> {
				  console.log(data)
				  this.toolList = data.data.deviceList.utensil
				  plus.nativeUI.closeWaiting()
				}, ()=> {
				  plus.nativeUI.closeWaiting()
				  console.log("获取数据失败");
				})
			},
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          status(item, v) {
            if (v == 1) {
              if (item == 0) {
                return '未开始'
              } else if (item == 1) {
                return '进行中'
              } else if (item == 2) {
                return '已完成'
              }
            } else {
              if (item == 0) {
                return 'b_g0'
              } else if (item == 1) {
                return 'b_g1'
              } else if (item == 2) {
                return 'b_g2'
              }
            }

          },
          dels(index){
            let then=this
            mui.confirm('确定要删除此条信息？', '提示', ['确认', '取消'], function (e) {
              // var li = then.parentNode.parentNode;
                if (e.index == 0) {
                  then.projectList.splice(index,1)
                   // li.parentNode.removeChild(li);
                    // li.parentNode.removeChild(li);
                } else {
                    // setTimeout(function () {
                    //     $.swipeoutClose(li);
                    // }, 0);
                }
            });
          },
          toSelect() {
            mui.baseApp.openWindow('./workOrderList.html', {
              projectId: ids
            })

          },
          addMaterial() {
            let wls = {
              materialArchivesId: '',
              quantity: 1,
              description: '',
              measdoc: '',
              type: '',
              isCustom: true
            }
            this.projectList.push(wls)
          },
          submits() {
            // this.projectList
            console.log(this.projectList)
            for(let i = 0;i < this.projectList.length; i++) {
              let item = this.projectList[i];
              if(!item.type) {
                mui.toast('请选择物料类型');
                return false
              }
              if(!item.materialArchivesId && item.isCustom) {
                mui.toast('请填写物料号');
                return false
              }
              if(!item.description && item.isCustom) {
                mui.toast('请填写物料描述');
                return false
              }
              if(!item.quantity) {
                mui.toast('请填写使用数量');
                return false
              }
              if(!item.measdoc) {
                mui.toast('请选择单位');
                return false
              }
            }
            mui.fire(self.opener(), 'materialsthis', {
              materialsthis: this.projectList
            })
            // localStorage.setItem('materialsthis', JSON.stringify(this.projectList))
            mui.back()
            // mui.baseApp.openWindow('./workingCode.html')
          },
        }
      });
	  
      function getProject(page) {
        if (page === 1) {
          // plus.nativeUI.showWaiting('加载中...');
        }
        mui.baseApp.httpRequst("get", "/app/api/project/execution/wp/" + ids, {
          page: page,
          size: size
        }, function(data) {
          console.log('数据列表', data)
          // plus.nativeUI.closeWaiting();
          if (page == 1) {
            vm.projectList = []
          }
          vm.projectList = vm.projectList.concat(data.data)
          vm.aList = [...vm.projectList]

        }, function() {
          // plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
	  function getSysInfo() {
	      types = {};
	      types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
	      types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
	      types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
	      types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
	      types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
	      types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
	      types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
	   
	      var str = types[plus.networkinfo.getCurrentType()];
	      if (str == '未知' || str == '未连接网络') {
	          return false;
	      } else {
	          return true;
	      }
	   
	  }


      document.getElementById('slider').addEventListener('slide', function(e) {
        console.log(e.detail.slideNumber);

      });
      
      window.addEventListener('selects', function(event) {
        let data = event.detail
        console.log('aaa', data)
        if(data.selects) {
          data.selects.quantity = 1
          data.selects.materialArchivesId = data.id
          data.selects.type = ''
          delete data.id
          vm.projectList.push(data.selects)
        }
      });
    </script>
  </body>

</html>
